<template>
  <div v-for="(item, index) in list" :key="index">
    <div
      :class="`cursor-pointer flex items-center justify-between`"
      :style="{
        height: styleObj.height,
        color: styleObj.color,
        transition: 'background .5s',
        background: currentValue == item[props['value']] ? styleObj.selectBgColor : '',
        '--deg': !item.open ? '-90deg' : '0',
        '--mpxt': !item.open ? '-4px' : '-2px',
        '--mpxl': !item.open ? '-9px' : '-10px',
      }"
    >
      <div class="flex items-center flex-1">
        <span :class="`${item[props['child']] ? 'arrow' : ''}`" @click="clickArrow(item)"></span>
        <div
          class="flex-1"
          style="font-size: var(--fontSize); user-select: none"
          @click="item[props['child']] ? clickArrow(item) : chooseTree(item[props.value], item)"
        >
          {{ item[props['label']] }}
        </div>
      </div>
      <div v-if="item[props['child']]"></div>
      <div
        v-else
        :style="{
          background: statusList.find((cur) => cur.statusValue == item[statusProps])?.statusColor,
          borderRadius: '2px',
          color: statusList.find((cur) => cur.statusValue == item[statusProps])?.fontColor,
          border: `1px solid ${statusList.find((cur) => cur.statusValue == item[statusProps])?.fontColor}`,
          fontSize: 'var(--fontSize)',
          width: '70px',
          textAlign: 'center',
          padding: '3px',
        }"
      >
        {{ statusList.find((cur) => cur.statusValue == item[statusProps])?.name }}
      </div>
    </div>
    <div v-if="item[props['child']] && item.open" :style="{ marginLeft: styleObj.marginLeft }">
      <TreeItem
        :current-value="currentValue"
        :list="item[props['child']]"
        :props="props"
        :status-list="statusList"
        :status-props="statusProps"
        :style-obj="styleObj"
        @chooseTree="chooseTree"
      />
    </div>
  </div>
</template>
<script>
  import { defineComponent } from 'vue'
  export default defineComponent({
    name: 'TreeItem',
    props: {
      list: {
        type: Array,
        default: function () {
          return []
        },
      },
      statusList: {
        type: Array,
        default: function () {
          return []
        },
      },
      props: {
        type: Object,
        default: () => ({}),
      },
      styleObj: {
        type: Object,
        default: () => ({}),
      },
      currentValue: {
        type: String,
        default: '',
      },
      statusProps: {
        type: String,
        default: '',
      },
    },
    emits: ['chooseTree'],
    data() {
      return {}
    },
    watch: {},
    created() {},
    mounted() {},
    methods: {
      clickArrow(item) {
        item.open = !item.open
      },
      chooseTree(e, item) {
        this.$emit('chooseTree', e, item)
      },
    },
  })
</script>
<style lang="scss">
  .uiTree {
    width: 100%;
  }
  .arrow {
    display: flex;
    align-items: center;
    position: relative;
    &::before {
      content: '';
      display: inline-block;
      border: 4px solid var(--arrowColor);
      border-color: var(--arrowColor) transparent transparent transparent;
      transform: rotateZ(var(--deg));
      transform-origin: 60% 50%;
      position: absolute;
      top: var(--mpxt);
      left: var(--mpxl);
    }
  }
</style>
